feat: introduce multi-level headers example for table#449
feat: introduce multi-level headers example for table#449balazspynter wants to merge 1 commit intoAccess4all:mainfrom
Conversation
✅ Deploy Preview for accessibility-developer-guide ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Thank you very much for your work. We are very pleased to keep inspiring people for the topic of accessibility and its support. I am happy to test your solutions and will incorporate them into the current system as soon as possible. |
RA11y1
left a comment
There was a problem hiding this comment.
The example under "Table as tree grid" using aria-level does not work on NVDA (v. 2025.1.2). I get the following output:
row 3 Region/Country column 1 Western Europe
Population column 2 200 million
row 4 Region/Country column 1 Austria
Population column 2 9 million
row 5 Region/Country column 1 France
Will check later with Regina on JAWS.
There was a problem hiding this comment.
We carefully reviewed the three examples provided and found that all of them lead to meaningfully different experiences depending on the assistive technology and the browser used.
Versions of used software
Firefox 147.0.1
Chrome 144.0.7559.59
NVDA 2025.3.2.535.88
JAWS 2026.2512.50
Example 1, Table with irregular headers
The first example referencing irregular headers, using rowspan works for the screen reader NVDA in both Chrome and FF (Firefox). When e.g. navigating between rows in the column "Population", the region group, the region, the country and the corresponding population is output by the screen reader. However, the screen reader JAWS does not announce over how many rows a header spans, on both FF and Chrome.
Example 2, Table with more headers
Using the screen reader NVDA, the given example works on FF but not on Chrome. In FF the screen reader will output the cell content of each linked header. However, there is a header missing for the cells in the population column, as navigating up and down won't announce the respective country. As stated under the example, the implementation is quite tedious, but also error prone. In Chrome the linked headers are not announced at all, NVDA only outputs regular headings and focused cell content. The example works when using the screen reader JAWS on Chrome. When using JAWS in FF, the regular for the row stating the country is not announced when navigating through the population column.
Example 3, Table as tree grid
The third example using the role treegrid and levels works in Chrome using NVDA, but it doesn't work in FF, where the levels are not announced. For some unknown reason, the screen reader JAWS is not able to move between columns in Chrome and is therefore unable to reach the population information using standard table navigation. Additionally, both in FF and Chrome the levels are not announced, the term "structured element" is output instead. Fundamentally, we find that substituting headers with levels to be suboptimal, as screen reader users only receive the level of a given row and not the corresponding region and region group name. In larger and more complex tables it will be increasingly more difficult to remember under which level 1, 2 or 3 etc. the user is located at.
Conclusion
Given the wide difference in behavior between browsers and screen reader combinations the statement here (https://www.accessibility-developer-guide.com/examples/tables/spanning-rows-cols/) seems to still apply: "keep your tables simple". In this example, splitting the table content into separate tables for each region and structuring it using regular headings would enable a consistent experience for everyone.
Some of these examples could be used to further illustrate the inconsistent user experience on the spanning rows cols page mentioned before. @rudigier would you find this to be beneficial?
Context
A hierarchical data structure could be shown in many ways.
Challenge
Show the data in a table and make it easily accessible.
New page introduced
https://deploy-preview-449--accessibility-developer-guide.netlify.app/examples/tables/multi-level-headers/